<template>
  <div class="tab">
    <div class="tab-item">
      <router-link to="/foods">商品</router-link>
    </div>
    <div class="tab-item">
      <router-link to="/evaluation">评价</router-link>
    </div>
    <div class="tab-item">
      <router-link to="/merchant">商家</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "tab",
  data() {
    return {};
  },

  methods: {}
};
</script>

<style lang='stylus' scoped>
.tab {
  display: flex;
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);

  .tab-item {
    flex: 1;
    text-align: center;

    & > a {
      display: block;
      font-size: 0.28rem;
      color: rgb(77, 85, 93);

      &.router-link-exact-active {
        color: rgb(240, 20, 20);
      }
    }
  }
}
</style>
